
<template>
  <div class="app-container app-container-next">
    <el-card class="box-card" shadow="false">
      <div slot="header" class="clearfix">
        <router-link :to="{name: 'menu-list'}">
          <el-button plain icon="el-icon-back" size="small" :round="true">
            返回
          </el-button>
        </router-link>
      </div>
      <el-row>
        <el-col :span="20">
          <el-form ref="menuForm" :model="menu" :rules="rules" label-width="120px">
            <h4>菜单信息</h4>
            <el-form-item label="菜单名称" prop="name">
              <el-input v-model="menu.name" placeholder="请输入菜单名称" style="width: 400px"/>
            </el-form-item>
            <h4>菜单目录结构</h4>
            <dragTreeTable
                ref="table"
                :data="treeData"
                :onDrag="onTreeDataChange"
                resize
                fixed
                :isdraggable="true">
            </dragTreeTable>
            <el-button type="text" @click="handleAddRow"> <i class="el-icon-plus"></i>添加菜单目录</el-button>
            <el-form-item>
              <el-button type="primary" @click="handleSubmit('menuForm')" :loading="submitLoading">保存</el-button>
              <el-button @click="handleReset('menuForm')">取消</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-card>
    <component v-if="showDialog !== 'home'" :is="showDialog" :productDialogVisible="isOpen" @save="getSelectData" />
  </div>
</template>

<script>
import {addNavigation} from '@/api/menu-navigation';
import dragTreeTable from '@/components/vue-drag-table/index';
import seriesDialog from '_c/Dialog/series_dialog';
import productDialog from '_c/Dialog/product_dialog';
import customizeDialog from '_c/Dialog/customize_dialog';
import customUrlDialog from '_c/Dialog/custom_url_dialog';
import {mapGetters} from 'vuex';
export default {
    name: 'menu-add',
    components: {
        dragTreeTable,
        'series_detail_page': seriesDialog,
        'product_detail_page': productDialog,
        'system_auto': customizeDialog,
        'theme_auto': customizeDialog,
        'url_auto': customUrlDialog
    },
    data () {
        return {
            isOpen: true,
            cacheData: {},
            showDialog: '',
            treeData: {
                columns: [],
                lists: [],
                custom_field: {
                    id: 'row-key-id',
                    parent_id: 'parent-row-key-id',
                    lists: 'navigationList',
                    order: 'sort'
                }
            },
            menu: {
                name: '',
                treeList: []
            },
            rules: {
                name: [
                    { required: true, message: '请输入菜单名称', trigger: 'blur' }
                ]
            },
            submitLoading: false
        };
    },
    computed: {
        ...mapGetters(['siteList']),
        siteId () {
            return this.$store.state.user.siteId;
        },
        siteInfo () {
            let info = this.siteList.find(res => res.id === Number(this.siteId));
            return info;
        }
    },
    mounted () {
        let columns = [
            {
                type: 'input',
                title: '<a>导航名称</a>',
                field: 'name',
                width: 400,
                align: 'left',
                titleAlign: 'left',
                formatter: item => {
                    return '<span>' + item.name + '</span>';
                }
            },
            {
                type: 'select',
                title: '<a style="font-size: 14px;">链接页面</a>',
                field: 'resourceName',
                width: 300,
                align: 'center',
                onchange: (data, model) => {
                    this.handleSetImg(data, model);
                }
            },
            // {
            //     title: '<div>移动端图片<div title="图片建议尺寸: &#10; 1.建议纵横比: 1:1(H5二级导航建议纵横比1:3) &#10; 2.上传的png/jpg/jep格式文件,大小不超过10MB" style="display: inline-block;width: 14px;height: 14px;line-height: 14px;font-size: 12px;color: #fff;background-color:#3C3C3C;border-radius: 7px;">?</div></div>',
            //     type: 'upload',
            //     field: 'mobileImage',
            //     width: 300
            // },
            {
                title: '<div>导航Icon<div title="图片建议尺寸: &#10; 1.建议纵横比: 1:1(H5二级导航建议纵横比1:3) &#10; 2.上传的png/jpg/jep格式文件,大小不超过10MB" style="display: inline-block;width: 14px;height: 14px;line-height: 14px;font-size: 12px;color: #fff;background-color:#3C3C3C;border-radius: 7px;">?</div></div>',
                type: 'upload',
                field: 'menuIcon',
                width: 300
            },
            {
                title: '<div>导航Banner<div title="图片建议尺寸: &#10; 1.建议纵横比: 1:1(H5二级导航建议纵横比1:3) &#10; 2.上传的png/jpg/jep格式文件,大小不超过10MB" style="display: inline-block;width: 14px;height: 14px;line-height: 14px;font-size: 12px;color: #fff;background-color:#3C3C3C;border-radius: 7px;">?</div></div>',
                type: 'upload',
                field: 'menuBanner',
                width: 300
            },
            {
                title: '操作',
                type: 'action',
                flex: 1,
                align: 'center',
                actions: [
                    {
                        text: '添加子节点',
                        onclick: (item) => {
                            this.$refs.table.AddRow(item['row-key-id'], {'resourceName': '', name: '', 'row-key-id': item['row-key-id'] + +new Date()});
                        },
                        formatter: (item, index) => {
                            return index < 2 ? '<i>添加子节点 </i>' : '';
                        }
                    },
                    {
                        text: '删除',
                        onclick: this.onDel,
                        formatter: item => {
                            return '<i>删除</i>';
                        }
                    }
                ]
            }
        ];
        this.treeData = {
            columns: columns,
            lists: []
        };
    },
    methods: {
        genID (length) {
            return Number(Math.random().toString().substr(3, length) + Date.now()).toString(36);
        },
        handleAddRow () {
            this.treeData.lists.push({
                sort: 0,
                name: '',
                linkUrl: '',
                resourceName: '',
                'row-key-id': this.genID(4)
            });
        },
        onTreeDataChange (list) {
            this.treeData.lists = list;
        },
        onDel (item) {
            const updatedLists = this.$refs.table.DelById(item['row-key-id']);
            console.log('当前行的数据', updatedLists);
            this.treeData.lists = updatedLists;
        },
        handleResponse (response, file, fileList) {
            return response;
        },
        handleSubmit (name) {
            this.$refs[name].validate(valid => {
                if (valid) {
                    this.submitLoading = true;
                    const menu = {
                        siteId: this.siteId,
                        name: this.menu.name,
                        navigationList: this.treeData.lists
                    };
                    addNavigation(menu).then(res => {
                        if (res.code === '200') {
                            this.submitLoading = false;
                            this.$message.success('新增成功');
                            this.$router.push({ name: 'menu-list' });
                        }
                    }).catch(() => {
                        this.submitLoading = false;
                    });
                }
            });
        },
        handleReset (name) {
            this.$router.push({ name: 'menu-list' });
        },
        getSelectData (data) {
            this.isOpen = false;
            const map = {
                'series_detail_page': 'collection',
                'product_detail_page': 'goods',
                'theme_auto': 'custom-page',
                'system_auto': 'system-auto-page'
            };
            if (this.showDialog !== 'url_auto' && this.showDialog !== 'home') {
                this.cacheData.linkUrl = 'https://' + this.siteInfo.domainName + `/${map[this.showDialog]}/` + data.id;
            } else if (this.showDialog === 'home') {
                this.cacheData.linkUrl = 'https://' + this.siteInfo.domainName + `/${data.resourceName}`;
            } else {
                this.cacheData.linkUrl = 'https://' + this.siteInfo.domainName + `/${data.url}`;
            }
        },
        handleSetImg (item, model) {
            model.mobileImage = item.mainImage || item.icon;
        }

    }
};

</script>

<style scoped>

</style>
